<template>
  <div>
    <!-- 
        <el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
        <el-header>：顶栏容器。
        <el-aside>：侧边栏容器。
        <el-main>：主要区域容器。
        <el-footer>：底栏容器。
       -->
    <el-container>
      <el-header>
        <h1>xxx大型后台管理系统</h1>
        <div class="h_r">
          <h2>欢迎老用户：{{ $store.getters.getUser.username }}</h2>
          <el-button class="h_b" size="mini" type="danger" @click="logout"
            >退出</el-button
          >
        </div>
      </el-header>
      <el-container>
        <el-aside width="240px">
          <v-nav></v-nav>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import vNav from "../components/vNav.vue";
export default {
  data() {
    return {};
  },
  components: {
    vNav,
  },
  methods: {
    logout() {
      this.$store.dispatch("changeUserAction", false);
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="less"scoped>
.el-header {
  background-color: #518ecb;
  display: flex;
  position: relative;
  h1 {
    color: #fff;
  }
  .h_r {
    position: absolute;
    right: 50px;
  }
  .h_b {
    margin-left: 60px;
  }
}
</style>
